<template>
    <div>
        <div style="margin-bottom: 12px;">
            <el-input style="width: 200px;" placeholder="请输入收货人名称" v-model="params.name" clearable></el-input>
            <el-button type="warning" style="margin-left: 10px;" @click="findBySearch()">查询</el-button>
            <el-button type="warning" style="margin-left: 10px;" @click="reset()">清空</el-button>
            <el-button type="primary" style="margin-left: 10px;" @click="add()">新增</el-button>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column fixed prop="addressid" width="100" label="地址ID"></el-table-column>
                <el-table-column width="150" prop="name" label="用户名称"></el-table-column>
                <el-table-column width="150" prop="username" label="收货人名称"></el-table-column>
                <el-table-column width="150" prop="phone" label="手机号"></el-table-column>
                <el-table-column width="150" prop="detailaddress" label="收货地址"></el-table-column>
                <el-table-column width="150" prop="isdefault" label="是否默认">
                    <template slot-scope="scope">
                        <!-- 使用三元表达式判断 isdefault 的值并显示对应的文本 -->
                        <span>{{ scope.row.isdefault == 0 ? '是' : '否' }}</span>
                    </template>
                </el-table-column>

                <el-table-column width="150" fixed="right" label="操作">
                    <template slot-scope="scope">
                        <!-- scope.row获取当前这一行的数据 -->
                        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.addressid)">
                            <el-button slot="reference" type="danger" style="margin-left: 5px;">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页功能 -->
        <div style="margin-top: 15px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="params.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 弹出框 -->
        <el-dialog title="收货地址信息" :visible.sync="dialogFormVisible" width="35%">
            <el-form :model="form" :rules="addressRules" ref="addressForm">
                <el-form-item label="用户昵称" prop="name" label-width="23%">
                    <el-input v-model="form.name" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="收货人名称" prop="username" label-width="23%">
                    <el-input v-model="form.username" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="收货号码" prop="phone" label-width="23%">
                    <el-input v-model.number="form.phone" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="收货地址" prop="detailaddress" label-width="23%">
                    <el-input v-model="form.detailaddress" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit('addressForm')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import request from '@/utils/request';
export default {
    data() {
        return {
            params: {
                // 按条件查询的参数name和phone
                name: '',
                phone: '',
                // 当前页码
                pageNum: 1,
                // 当前每页显示多少条数据
                pageSize: 5
            },
            tableData: [],
            //总条数
            total: 0,
            dialogFormVisible: false,
            //保存每个实体对象
            form: {},
            addressRules: {
                name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入收货人姓名', trigger: 'blur' },
                    { min: 2, max: 4, message: '长度在 2 到 4 个字', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入收货人手机号', trigger: 'blur' },
                    { validator: this.validatePhoneNumber, trigger: 'blur' },
                ],
                detailaddress: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' }
                ]
            }
        }
    },
    //页面加载时要做一些事情
    created() {
        this.findBySearch();
        this.findTypes();
    },
    //定义一些页面上控件发出事件调用的方法
    methods: {
        //查询全部/分页查询
        findBySearch() {
            request.get("/address/search", {
                params: this.params
            }).then(res => {
                if (res.code === '200') {
                    console.log(res);
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        findTypes() {
            request.get('/station').then(res => {
                if (res.code === '200') {
                    this.typeObjs = res.data;
                    console.log(this.typeObjs);
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        //表单正则校验手机号规则
        validatePhoneNumber(rule, value, callback) {
            const reg = /^1[345789]\d{9}$/;
            if (!reg.test(value)) {
                callback(new Error('请输入正确的手机号'));
            } else {
                callback();
            }
        },
        // 点击新增和修改时将对话框显示出来
        add() {
            this.dialogFormVisible = true;
            this.$refs.addressForm.resetFields(); // 清空表单校验状态和输入值
            this.form = {};
        },
        handleCancel() {
            // 关闭对话框前重置表单校验状态
            this.$refs.addressForm.clearValidate();
            // 关闭对话框
            this.dialogFormVisible = false;
        },
        handleClose() {
            // 关闭对话框前重置表单校验状态
            this.$refs.addressForm.clearValidate();
            // 关闭对话框
            this.dialogFormVisible = false;
        },
        // 重置表单为原始正确的内容
        resetForm() {
            // 将当前表单对象的值重置为原始正确的内容
            this.form = Object.assign({}, this.originalForm);
        },
        // 提交表单获取这一行的数据,并打开表单，数据的回显
        edit(obj) {
            // 备份原始正确的表单数据
            this.originalForm = Object.assign({}, obj);
            // 将表单数据赋值为编辑对象的数据
            this.form = Object.assign({}, obj);
            // 清除不正确的校验状态
            this.$nextTick(() => {
                this.$refs.addressForm.clearValidate();
            });
            this.dialogFormVisible = true;
        },
        // 将搜索框中的数据清除，然后重新查询
        reset() {
            this.params = {
                pageNum: 1,
                pageSize: 5,
                gname: '',
            }
            this.findBySearch();
        },
        // 分页功能
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
            this.findBySearch();
        },
        handleCurrentChange(pageNum) {
            this.params.pageNum = pageNum;
            this.findBySearch();
        },
        // 将数据往后台传
        submit(addressForm) {
            this.$refs[addressForm].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    request.post('/address', this.form).then(res => {
                        if (res.code === '200') {
                            // console.log(res);
                            this.$message.success("操作成功");
                            // 操作成功后关闭对话框
                            this.dialogFormVisible = false;
                            this.findBySearch();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                } else {
                    this.$message.error('请填写完整信息');
                }
            })
        },
        // 根据id删除某条数据
        del(addressid) {
            request.delete("/address/" + addressid).then(res => {
                if (res.code === '200') {
                    this.$message.success("删除成功");
                    this.findBySearch();
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
    }
}
</script>
  